<template>
  <div class="main">
    <div class="uc-header">
      <div class="back" @click="$router.back()">
        <img src="@/assets/img/3.png" />
      </div>
      <div class="title">{{ $t("RechargeHistory") }}</div>
    </div>
    <div class="cont">
      <van-list
        v-model="listLoading"
        @load="onLoadList"
        :finished="this.list.length == this.pages.total && this.pages.total > 0"
        finished-text="No more"
      >
        <div class="nodata" v-show="pages.nodata">
          <img src="@/assets/img/default.jpg" />
          <p>{{ $t("NoRechargeData") }}</p>
        </div>
        <div class="list-item" v-for="(v, i) in list" :key="i">
          <div class="li-head">
            <!-- <div class="lih-l">No.{{i+1}}</div> -->
            <div class="lih-r">{{ getTimes(v.datetime) }}</div>
          </div>
          <!-- <div class="lih-bbc">
            <div class="bbc-l">Order Number</div>
            <div class="bbc-r">{{v.id}}</div>
          </div> -->
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Type") }}</div>
            <div class="bbc-r">{{ v.amount_type }}</div>
          </div>
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Name") }}</div>
            <div class="bbc-r">{{ v.name }}</div>
          </div>
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Amount") }}</div>
            <div class="bbc-r">
              {{ v.symbol }}{{ formatMoney(v.diamond_change, true) }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { httpAssetChangeRecords } from "@/http/api";
import { getTimes, formatMoney } from "@/utils/common";
export default {
  name: "rechargeHistory",
  data() {
    return {
      list: [],
      listLoading: false,
      listAjax: false,
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        nodata: false,
      },
    };
  },
  created() {
    // this.getHttpAssetChangeRecords()
  },
  methods: {
    getTimes,
    formatMoney,
    async getHttpAssetChangeRecords() {
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
        amount_type: 1,
      };
      this.listAjax = true;
      let res = await httpAssetChangeRecords(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code == 0) {
        this.list = [...this.list, ...res.data.list];
        this.pages.total = res.data.page.total_count;

        if (this.list.length < this.pages.total) this.pages.page++;
        if (!this.pages.total) this.pages.nodata = true;
      }
    },
    onLoadList() {
      if (this.pages.nodata) return (this.listLoading = false);
      if (this.list.length == this.pages.total && this.pages.total > 0)
        return (this.listLoading = false);
      this.listLoading = true;
      this.getHttpAssetChangeRecords();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./newFont.less");
* {
  font-weight: 800;
  color: #93653e;
}
.cont {
  width: 100%;
  padding: 64px 32px 20px;

  .list-item {
    width: 682px;

    opacity: 1;
    box-shadow: 0px 3px 12px 0px rgba(213, 213, 213, 0.56);
    border-radius: 20px;
    padding: 0 30px;
    margin-bottom: 20px;

    .li-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 120px;
      // border-bottom: 1px solid rgba(213, 213, 213, 0.56);
      border-bottom: 1px solid #806f6f;
      margin-bottom: 20px;

      .lih-l {
        width: 226px;
        height: 63px;
        background: rgba(171, 182, 212, 1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        // font-weight: 400;
        letter-spacing: 0.96px;
        // color: rgba(252, 252, 252, 1);
      }

      .lih-r {
        font-size: 24px;
        // font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(171, 182, 212, 1);
      }
    }

    .lih-bbc {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;

      .bbc-l {
        font-size: 28px;
        // font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(171, 182, 212, 1);
      }

      .bbc-r {
        font-size: 28px;
        // font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(132, 144, 177, 1);
      }
    }
  }
}
</style>
